<template>
	<view class="audio-box bai left clearfix">
		<!--头部导航-->
		<top :scrollTop = "scrollTop"></top>
		<view class="audio-content left clearfix">
			<view class="works-title left clearfix">
				<view class="works-titles left">
					音频作品
				</view>
				
				<view class="audio-add right" @click="showAddTimbre = true">
					<uni-icons type="icon-yinpin24" size="15" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>创建专辑
				</view>
				
				
				<view class="works-so right clearfix">
					<label>
						<input placeholder="搜索关键词" :focus="keywordFocus" v-model="keyword" maxlength="100" />
					</label>
					<label @click="getDataListByKeyword()">
						<uni-icons type="search" size="25" color="#666"></uni-icons>
					</label>
					
				</view>
				
				<view class="works-shaixuan right clearfix relative" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
					<label>时间排序</label>
					<label>
						<uni-icons :type="showMenu==false?'bottom':'top'" size="13" color="#333"></uni-icons>
					</label>
					<view class="works-shaixuan-menu absolute" v-if="showMenu == true">
						<view class="works-shaixuan-item left" :style="order=='create_date desc'?'color:#2979ff;font-weight:bold;':'color:#333;font-weight:400;'" @click="order = 'create_date desc'">
							最新
						</view>
						
						<view class="works-shaixuan-item left" :style="order=='create_date asc'?'color:#2979ff;font-weight:bold;':'color:#333;font-weight:400;'" @click="order = 'create_date asc'">
							最早
						</view>
						
						
					</view>
				</view>
				
				<view class="audio-contents left clearfix">
					<uni-table stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th style="padding:0px;" align="center" width="70">序号</uni-th>
							<uni-th  style="padding:0px;" align="center">专辑名</uni-th>
							<uni-th  style="padding:0px;" align="center" width="70">章节数</uni-th>
							<uni-th  style="padding:0px;" align="center" width="70">发布</uni-th>
							<uni-th  style="padding:0px;" align="center" width="200">创建时间</uni-th>
							<uni-th  style="padding:0px;" align="center" width="220">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in data">
							<uni-td align="center">{{index + 1}}</uni-td>
							<uni-td>{{item.title}} 
							<label style="margin-left:10px;" title="复制" @click="setCopy(item,index)"><uni-icons type="icon-fuzhi5" size="16" :color="copyIndex==index?'#18bc37':'#666'" custom-prefix="iconfont"></uni-icons></label>
							</uni-td>
							<uni-td align="center">{{item.chapter_number}}</uni-td>
							<uni-td align="center" v-if="item.is_publish==true" style="color:#18bc37;">已发布</uni-td>
							<uni-td align="center" v-if="item.is_publish==false" style="color:#ccc;">--</uni-td>
							<uni-td align="center"><uni-dateformat format="yyyy-MM-dd hh:mm" :date="item.create_date"></uni-dateformat></uni-td>
							<uni-td align="center">
								<view class="audio-buttons left" title="声音管理" @click="navigateTo(item,index)">
									<uni-icons type="icon-a-5Jyinboyinpin" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									声音管理
								</view>
								
								<view class="audio-buttons left" style="background:#e43d33;" title="删除" @click="alertRemove(item,index)">
									<uni-icons type="icon-shanchu3" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									删除
								</view>
								
								
							</uni-td>
						</uni-tr>
					
					</uni-table>
				</view>
				
				<view class="audio-page-box left clearfix">
					<uni-pagination pageSize="20" @change="getDataListByPage" title="标题文字" :total="total" :current="currentPage"></uni-pagination>
				</view>
				
			</view>
		</view>
		
		<!--添加弹窗-->
		<add-popup :userinfo="userinfo" @close="showAddTimbre = false" @confirm="addData" :show="showAddTimbre"></add-popup>
		<u-modal :show="show" @confirm="remove()" @cancel="show = false" :title="title" :content='content' :showCancelButton="true"></u-modal>
	</view>
</template>

<style>
	.uni-table-th{padding:0;}
</style>
<style scoped>
	.audio-page-box{width:100%;height:40px;}
	.audio-buttons{padding-left:10px;padding-right:10px;background:#2979ff;border-radius: 3px;color:#fff;line-height:30px;height:30px;text-align:center;margin-left:10px;font-size:12px;cursor:pointer;}
	.audio-contents{width:100%;min-height:550px;margin-top:40px;overflow: auto;}
	.audio-add{margin-left:20px;cursor:pointer;width:120px;height:35px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);border-radius: 5px;font-size:14px;color:#fff;text-align: center;line-height:35px;margin:2.5px;}
	.audio-content{width:96%;margin-left:2%;min-height:720px;margin-top:65px;background:#fff;border-radius: 20px;min-width:1380px;}
</style>

<script>
	import common from "@/static/js/common.js"
	var db = uniCloud.database();
	export default {
		data() {
			return {
				keyword:'',//关键词
				order:'create_date desc',
				showAddTimbre:false,//弹出添加弹窗
				scrollTop:0,
				showMenu:false,
				userinfo:{},//登录用户信息
				data:[],
				currentPage:1,
				title:'删除确认',
				content:'确认要删除吗？',
				show:false,
				currentRemoveItem:{},//当前删除数据
				keywordFocus:false,
				copyIndex:null,
				total:0
			}
		},
		watch:{
			"order"(val){
				this.getDataList(this.userinfo,1);
			}
		},
		created() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(res){
					var userinfo = res.data;
					if(userinfo && userinfo._id){
						that.userinfo = userinfo;
						that.getDataList(userinfo);
					}else{
						uni.navigateTo({
							url: '/pages/index/index'
						});
					}
				},
				fail() {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			});
			
		},
		onReady() {
			var that = this;
			window.onscroll = function() {
			  that.scrollTop = common.getScrollTop();
			};
		},
		methods: {
			//复制
			setCopy(item,index){
				var that = this;
				uni.setClipboardData({
					data: item.title,
					success: function () {
						that.copyIndex = index;
					}
				});
			},
			//跳转到章节页面
			navigateTo(item,index){
				uni.navigateTo({
					url: '/pages/audio/chapter?id='+item._id
				});
			},
			//根据关键词查询数据
			getDataListByKeyword(){
				
				this.getDataList(this.userinfo,1);
				
			},
			//确认删除弹窗
			alertRemove(item,index){
				if(item.chapter_number > 0){
					uni.showToast({
						title:'该专辑下有音频内容，无法删除',
						icon:'none',
						duration:2000
					})
					return false;
				}
				this.show = true;
				this.currentRemoveItem = {
					item:item,
					index:index
				}
			},
			//删除
			remove(){
				var item = this.currentRemoveItem.item;
				var index = this.currentRemoveItem.index;
				if(item._id && item.chapter_number==0){
					db.collection('timbre_title').where({_id:item._id}).remove().then(res=>{
						this.show = false;
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						this.data.splice(index,1);
					});
				}
				
			},
			//添加成功以后
			addData(e){
				this.data.unshift(e);
			},
			//根据分页获取数据
			getDataListByPage(e){
				var userinfo = this.userinfo;
				var page = e.current;
				if(userinfo && userinfo._id && page > 0 && page!=this.currentPage){
					this.getDataList(userinfo,page);
					this.currentPage = page;
				}
			},
			//获取数据
			getDataList(userinfo,page = 1){
				var keyword = this.keyword;
				uni.showLoading({
					title:'加载中'
				})
				var skip = (page - 1) * 20;
				if(!keyword){
					db.collection('timbre_title').where({uid:userinfo._id,type:'title'}).orderBy(this.order).skip(skip).limit(20).get({getCount:true}).then(res=>{
						var data = res.result.data;
						this.total = res.result.count;
						this.data = data;
						uni.hideLoading()
					});
				}else{
					db.collection('timbre_title').where(db.command.and({uid:userinfo._id,type:'title',title: new RegExp(keyword, 'i')})).orderBy(this.order).skip(skip).limit(20).get({getCount:true}).then(res=>{
						var data = res.result.data;
						this.total = res.result.count;
						this.data = data;
						uni.hideLoading()
					});
				}
				
			}
		}
	}
</script>

